<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/static/bootstrap/main/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/bootstrap/table/css/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/bootstrap/fileinput/css/fileinput.min.css}" rel="stylesheet"/>
    <link rel="stylesheet"  th:href="@{/static/layui/css/layui.css}"  media="all">
</head>
<body>
<h2>数据字典</h2>
<div class="layui-row">
    <div class="layui-col-xs3">
        <div id="test2" class="demo-tree"></div>
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>手风琴模式</legend>
        </fieldset>
    </div>
    <div class="layui-col-xs9">
        <div class="grid-demo">9/12</div>
    </div>
</div>

</body>
<script th:src="@{/static/bootstrap/jquery/jquery-3.3.1.min.js}"></script>
<script th:src="@{/static/bootstrap/main/js/bootstrap.min.js}"></script>
<script th:src="@{/static/bootstrap/table/js/bootstrap-table.min.js}"></script>
<script th:src="@{/static/bootstrap/table/js/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/static/bootstrap/fileinput/js/fileinput.js}"></script>
<script th:src="@{/static/bootstrap/fileinput/locales/zh.js}"></script>
<script th:src="@{/static/layui/layui.js}"></script>
<script>
    var layer;
    layui.use(['tree', 'util','layer'], function() { //独立版的layer无需执行这一句
        var tree = layui.tree
            ,util = layui.util;
        layer = layui.layer;
        //手风琴模式
        tree.render({
            elem: '#test2'
            ,data: [{
                title: '优秀'
                ,children: [{
                    title: '80 ~ 90'
                },{
                    title: '90 ~ 100'
                }]
            }]
            ,accordion: true
            ,isJump: true //是否允许点击节点时弹出新窗口跳转
            ,click: function(obj){
                var data = obj.data;  //获取当前点击的节点数据
                layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                }
            });
    });
</script>

</html>